<template>
        <fieldset>
            <legend>{{isLogin?'内容界面':'登录界面'}}</legend>
            <!-- 内容展示界面 -->

            <!-- <div  v-if="isLogin" :userInfo="userInfo"></div> -->

            <child @on-t="logout" v-if="isLogin" :userInfo="userInfo" :buttons="buttons"></child>
            <!-- <div class="content" v-if="isLogin" >
                <h1>列表展示</h1>
                <button @on-logout="logout">点击退出登录</button>
                <button>点击获取列表数据</button>
                <h2>
                    <img width="50" :src="userInfo.headimgurl" alt="">
                    昵称：{{userInfo.nickname}}
                    <span></span>
                </h2>
                <ul>
                    <li>
                        <b></b>
                        <button >查看</button>
                        <button >修改</button>
                        <button >删除</button>
                        <button >增加</button>
                    </li>
                </ul>
            </div> -->

            

            <!-- 登入界面 -->
            <div class="login" v-else>
                <h1>请登入</h1>
                <label for="username">账号:</label>
                <input type="text" id="username" v-model="username">
                <br>

                <label for="password">密码:</label>
                <input type="password" id="password" v-model="password" @keydown.enter="login">
                <br>
                <button @click="login">登入</button>
            </div>
            
            <!-- <child v-if="isLogin" ></child> -->
        </fieldset>
        
</template>

<script>
const loginApi = (params = {}) => {
    return fetch('http://chst.vip/users/login', {
        //请求方式
        method: 'post',
        headers: {
            'content-type': 'application/json'
        },
        //携带的参数（上载的参数）
        body: JSON.stringify(params)
    })
        .then(body => body.json())
        .catch(err => err.toString())

}
import child from "./child"

    export default{
        data(){
            return{
                //接收v-model绑定的用户名和密码
                username:'',
                password:'',
                isLogin:false,
                userInfo:{},
                buttons:''


            }
        },
        components:{
            child
        },
        methods:{
           async login(){
             let res= await   loginApi({ username: this.username, password: this.password })
                console.log(res);
                if(res.state){
                    this.isLogin = true
                    this.userInfo = res.userInfo,
                    this.buttons =res.permission.buttons
                    sessionStorage.setItem('user-token',res.token)
                    console.log(this.buttons);
                }
               
            },
            logout(){
                this.isLogin = false              
            }
        },
        mounted(){
           //获取列表的请求
            fetch('http://chst.vip/students/getstulist?count=10', {
                headers: {
                    'authorization': sessionStorage.getItem('user-token')
                }  
            })
            .then(body => body.json())
            .then(res=>{
                console.log(res);
            })
            .catch(err => err.toString())          
        },
        
    }
</script>